<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px" v-show="showSearch">
      <el-form-item label="省" prop="provinceId">
        <el-select v-model="queryParams.provinceId" placeholder="请选择省" @change="chooseProvince" clearable>
          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="cityId">
        <el-select v-model="queryParams.cityId" placeholder="请选择市" @change="chooseCity" clearable>
          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区/县" prop="areaId">
        <el-select v-model="queryParams.areaId" placeholder="请选择区/县" clearable>
          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="addres">添加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain icon="Delete" :disabled="multiple" @click="delData">删除</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getListData"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" stripe  :data="getData" @selection-change="handleSelectionChange" row-key="id">
      <el-table-column type="selection" width="55" align="center" reserve-selection />
      <el-table-column label="省" align="center" prop="province" />
      <el-table-column label="市" align="center" prop="city" />
      <el-table-column label="区/县" align="center" prop="area" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="text"  @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text"  @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
      @pagination="getListData" />
    <el-dialog :title="title" v-model="open" width="850px" append-to-body @close="closeDialog">
      <p class="dialogTitle">{{ title }}</p>
      <el-form ref="annualriskRef" :model="form" :rules="rules" label-width="120px">
      	<el-row>
      		<el-col :span="12">
      			<el-form-item label="省" prop="provinceId">
		          <el-select v-model="form.provinceId" placeholder="请选择" @change="chooseFormProvince" :disabled="isEdit"
		            style="width: 250px">
		            <el-option v-for="item in provinceFormData" :key="item.id" :label="item.name" :value="item.id">
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>
      		<el-col :span="12">
      			<el-form-item label="市" prop="cityId">
		          <el-select v-model="form.cityId" placeholder="请选择" @change="chooseFormCity" :disabled="isEdit"
		            style="width: 250px">
		            <el-option v-for="item in cityFormData" :key="item.id" :label="item.name" :value="item.id">
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>     
      	</el-row>
        
        <el-form-item label="区/县" prop="areaId">
          <el-select v-model="form.areaId" placeholder="请选择" :disabled="isEdit" style="width: 250px">
            <el-option v-for="item in areaFormData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建筑物" prop="building">
          <el-input v-model="form.building" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="地震灾害重点隐患" prop="disasterHiddenDanger">
          <el-input v-model="form.disasterHiddenDanger" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="生命线系统" prop="lifelineSystem">
          <el-input v-model="form.lifelineSystem" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="重大基础设施" prop="majorInfrastructure">
          <el-input v-model="form.majorInfrastructure" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
        <el-form-item label="其他年度风险应对策略">
          <el-input v-model="form.otherAnnualDisaster" type="textarea" maxlength="500" rows="6" show-word-limit/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button plain @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="openView"  width="850px" append-to-body @close="closeDialog">
      <p class="dialogTitle">{{ title }}</p>
      <el-form ref="annualriskRef" :model="form" :rules="rules" label-width="120px">
      	<el-row>
      		<el-col :span="12">
      			<el-form-item label="省" prop="provinceId">
		          <el-select v-model="form.provinceId" placeholder="请选择" @change="chooseFormProvince" disabled
		            style="width: 250px">
		            <el-option v-for="item in provinceFormData" :key="item.id" :label="item.name" :value="item.id">
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>
      		<el-col :span="12">
      			<el-form-item label="市" prop="cityId">
		          <el-select v-model="form.cityId" placeholder="请选择" @change="chooseFormCity" disabled
		            style="width: 250px">
		            <el-option v-for="item in cityFormData" :key="item.id" :label="item.name" :value="item.id">
		            </el-option>
		          </el-select>
		        </el-form-item>
      		</el-col>     
      	</el-row>
        
        <el-form-item label="区/县" prop="areaId">
          <el-select v-model="form.areaId" placeholder="请选择" disabled style="width: 250px">
            <el-option v-for="item in areaFormData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建筑物" prop="building">
          <el-input v-model="form.building" type="textarea" maxlength="500" rows="6" disabled show-word-limit/>
        </el-form-item>
        <el-form-item label="地震灾害重点隐患" prop="disasterHiddenDanger">
          <el-input v-model="form.disasterHiddenDanger" type="textarea" maxlength="500" rows="6" disabled show-word-limit/>
        </el-form-item>
        <el-form-item label="生命线系统" prop="lifelineSystem">
          <el-input v-model="form.lifelineSystem" type="textarea" maxlength="500" rows="6" disabled show-word-limit/>
        </el-form-item>
        <el-form-item label="重大基础设施" prop="majorInfrastructure">
          <el-input v-model="form.majorInfrastructure" type="textarea" maxlength="500" rows="6" disabled show-word-limit/>
        </el-form-item>
        <el-form-item label="其他年度风险应对策略">
          <el-input v-model="form.otherAnnualDisaster" type="textarea" maxlength="500" rows="6" disabled show-word-limit/>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { getProvince3, getChildArea } from "@/api/system/division";
import {
  getList,
  saveList,
  getAnnualrisk,
  delList,
  updateList,
  getUserProvinceId
} from "@/api/suggestions/annualrisk";

const { proxy } = getCurrentInstance();
const showSearch = ref(true);
const open = ref(false); //dialog操作
const openView = ref(false);
const getData = ref([]); //获取列表数组
const title = ref(""); //标题
const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const loading = ref(false);
const isEdit = ref(false);

const provinceFormData = ref([]);//表单省 
const cityFormData = ref([]);//表单市
const areaFormData = ref([]);//表单区、县

const data = reactive({
  form: {},
  queryParams: {
    page: 1,
    rows: 10,
    provinceId: null,
    cityId: null,
    areaId: null,
  },
  taskDetailDialog: {
    arrsmId: "",
    arrsnProvince: "",
    arrsmCity: "",
    arrsmPrefecture: "",
    building: "",
    disasterHiddenDanger: "",
    lifelineSystem: "",
    majorInfrastructure: "",
    otherAnnualDisaster: "",
  },
  rules: {
    provinceId: [{ required: true, message: "省不能为空", trigger: "change" }],
    cityId: [{ required: true, message: "市不能为空", trigger: "change" }],
    areaId: [
      { required: true, message: "县不能为空", trigger: "change" },
    ],
    building: [
      { required: true, message: "建筑物不能为空", trigger: "blur" },
    ],
    disasterHiddenDanger: [
      { required: true, message: "地震灾害重点隐患不能为空", trigger: "blur" },
    ],
    lifelineSystem: [
      { required: true, message: "生命线系统不能为空", trigger: "blur" },
    ],
    majorInfrastructure: [
      { required: true, message: "重大基础设施不能为空", trigger: "blur" },
    ],
  },
});
const { queryParams, form, rules, taskDetailDialog } = toRefs(data);

function chooseProvince(value) {
  console.log(value);
  queryParams.value.cityId = null;
  queryParams.value.areaId = null;
  cityData.value = [];
  areaData.value = [];
  getChildArea(value).then(response => {
    cityData.value = response.data;
	});
}

function chooseCity(value) {
  queryParams.value.areaId = null;
  areaData.value = [];
  getChildArea(value).then((response) => {
    areaData.value = response.data;
  });
}

function chooseFormProvince(value){
	form.value.cityId = null;
	form.value.areaId = null;
	cityFormData.value = [];
	areaFormData.value = [];
	getChildArea(value).then(response => {
    cityFormData.value = response.data;
	});	
}
function chooseFormCity(value){
	form.value.areaId = null;
	areaFormData.value = [];
	getChildArea(value).then(response => {
	    areaFormData.value = response.data;
	});
}

function addProvinceFormData(provinceId) {
	getProvince3().then(response => {
	    provinceFormData.value = response.data;
	});
	getChildArea(provinceId).then(response => {
    cityFormData.value = response.data;
	});
	
}

function editProvinceFormData(provinceId,cityId) {
	getProvince3().then(response => {
	    provinceFormData.value = response.data;
	});
	getChildArea(provinceId).then(response => {
    cityFormData.value = response.data;
	});
	getChildArea(cityId).then(response => {
	    areaFormData.value = response.data;
	});
}

/** 获取省列表 */
function getProvinceData() {
  getProvince3().then((response) => {
    provinceData.value = response.data;
    provinceFormData.value = response.data;
  });
}

// 获取列表
function getListData() {
  loading.value = true;
  getList(queryParams.value).then((res) => {
    getData.value = res.data.rows;
    total.value = res.data.total;
    loading.value = false;
  });
}

// 查询
function handleQuery() {
  queryParams.page = 1;
  getListData();
}
// 重置
function resetQuery() {
  proxy.resetForm("queryRef");
  getListData();
}

// 添加按钮
function addres() {
  open.value = true;
  title.value = "添加年度风险应对策略";
  getUserProvinceId().then((res) => {
  	form.value.provinceId = res.data;
    addProvinceFormData(res.data);
  });
}
// 删除
function delData() {
  proxy.$modal
    .confirm("是否确认删除吗？")
    .then(function () {
      return delList(ids.value);
    })
    .then(() => {
      getListData();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => { });
}

// 修改操作
function handleUpdate(row) {
  title.value = "修改年度风险应对策略";
  getAnnualrisk(row.id).then(response => {
    form.value = response.data;
    open.value = true;
    editProvinceFormData(response.data.provinceId,response.data.cityId)
  });
}

//查看操作
function handleView(row) {  
  title.value = "查看年度风险应对策略";
  getAnnualrisk(row.id).then(response => {
    form.value = response.data;
    openView.value = true;
    editProvinceFormData(response.data.provinceId,response.data.cityId)
  });
}

//保存
function submitForm() {
  proxy.$refs["annualriskRef"].validate(valid => {
    if (valid) {
      if (title.value != "修改年度风险应对策略") {
	      saveList({
	        provinceId: form.value.provinceId,
	        cityId: form.value.cityId,
	        areaId: form.value.areaId,
	        building: form.value.building,
	        disasterHiddenDanger: form.value.disasterHiddenDanger,
	        lifelineSystem: form.value.lifelineSystem,
	        majorInfrastructure: form.value.majorInfrastructure,
	        otherAnnualDisaster: form.value.otherAnnualDisaster,
	      }).then((res) => {
	      	if(res.message == "该省市区县已存在,不能添加!"){		    		
						proxy.$modal.msgWarning(res.message);
					}else{
						proxy.$modal.msgSuccess(res.message);
						open.value = false;
				  	getListData();
					}
	      });
	    } else {
	      updateList(form.value).then((res) => {
	        if(res.message == "该省市区县已存在,不能修改!"){		    		
						proxy.$modal.msgWarning(res.message);
					}else{
						proxy.$modal.msgSuccess(res.message);
						open.value = false;
				  	getListData();
					}
	      });
	    }
    }

    
    
  });
}

//复选框操作
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 表单重置
function reset() {
  form.value = {
    arrsmId: "",
    provinceId: null,
    cityId: null,
    areaId: null,
    building: null,
    disasterHiddenDanger: null,
    lifelineSystem: null,
    majorInfrastructure: null,
    otherAnnualDisaster: null,
  };
  proxy.resetForm("annualriskRef");
}

//关闭dialog
function closeDialog() {
  open.value = false;
  openView.value = false;
  reset();
}

getProvinceData();
getListData();
</script>
